<template>
	<view class="course">
		<!-- <customer-service></customer-service> -->
		<view class="course-con" v-if="list.length > 0">
			<view class="course-lis" v-for="(item,index) in list" :key="id" @click.stop="openPage" data-url="/pages/course/coursedtl" :data-id="item.id">
					<view class="hot" v-if="item.sign == 'HOT'"><image src="../../static/icon/hot.png" mode="widthFix"></image></view>
					<view class="new" v-if="item.sign == 'NEW'"><image src="../../static/icon/new.png" mode="widthFix"></image></view>
					<view class="course-lis-tit">
						<text class="tag" v-if="item.title_sign">{{item.title_sign}}</text>
						<text>{{item.name}}</text>
					</view>
					<view class="course-lis-dec ellipsis2">{{item.describe}}</view>
					<view class="course-lis-bot  flow-space-between" >
						<view class="left">
							<view class="course-teacher " v-if="item.teacher.length > 0">
								<view class="course-teacher-img flow-flex-start" :class="item.moreShow ?'course-teacher-imgmore':''">
									<image :src="val.avatar" v-for="(val,j) in item.teacher" :key="val"  @click.stop="openPage" data-url="/moduleA/pages/teacher/teacherdtl/teacherdtl" :data-id="val.id"></image>
								</view>
								<view class="tag-more" v-if="item.teacher.length > 7 && !item.moreShow" @click.stop="showMore" :data-index="index"></view>
								<view class="tag-more tag-more2" v-if="item.teacher.length > 7 && item.moreShow" @click.stop="showMore" :data-index="index"></view>
							</view>
							<text v-if="timeList.length > 0 && timeList[index] && timeList[index].limit_time == 1">{{timeList[index].timeTxt}}</text>
							<text class="test" v-for="(val,j) in item.tags" :key="val" v-if="val">{{val}}</text>
						</view>
						<view class="right">
							<view class="old-price">{{item.ot_price}}元{{item.is_spec?'起':''}}</view>
							<view class="now-price">{{item.price}}元{{item.is_spec?'起':''}}</view>
							<view class="buy-num">{{item.buy_num}}人已购买</view>
						</view>
					</view>
				</view>
			<!-- 
			<view class="course-lis" bindtap="openPage" data-url="/pages/course/coursedtl/coursedtl">
				<view class="new"><image src="/tst/new.png" mode="widthFix"></image></view>
				<view class="course-lis-tit">
					<text class="tag">面授</text>
					<text>1V1课程精品课课程精品课课程精品课课程精品课课程精品课（基础版)</text>
				</view>
				<view class="course-lis-dec">支持回放观看，购买即赠送价值399元的面试测评</view>
				<view class="course-lis-bot flow-space-between">
					<view class="left">
						<text>距停售15天</text>
						<text class="test">支持试听</text>
					</view>
					<view class="right">
						<view class="old-price">99999元起</view>
						<view class="now-price">1999元起</view>
						<view class="buy-num">3人已购买</view>
					</view>
				</view>
			</view> -->
			<u-loadmore :status="status" :fontSize="12" color="#ccc" v-if="list.length > 10"/>
			<view class="empty-box" v-if="emptyShow && banner.length == 0">
				<u-empty  mode="data" marginTop="150rpx" text="暂无数据"></u-empty>
			</view>
		</view>
		<view class="ad">
			<template v-for="(item,index) in banner" >
				<image :src="imgHost + item.image" :key="item.id" mode="widthFix" bindtap="bannerBtn"  :data-mode="item.mode" :data-url = "item.path" :data-hurl = "item.url"  :data-param="item.param" :data-action="item.action"></image>
			</template>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import $C from '@/common/config.js';
	export default {
		data() {
			return {
				imgHost:$C.imgHost,
				list:[],
				banner:[],
				pageParam:{
					page:1,
					limit:10,
					hasMore:true
				},
				emptyShow:false,
				status:'loadmore',
				timeList: [], //时间戳
				timeIntervalSeveral:null,
				noEnter:true,
				openid:'',
			}
		},
		computed: {
			...mapState(['userInfo']), // vuex获取用户数据
		},
		onLoad(options) {
			this.getList();
			this.getBanner();
		},
		onShow(){
			this.openid = this.getCookie("openid");
			if(this.openid){
				if(!uni.getStorageSync('token')){
					this.getToken();
				}
			}else{
				// #ifdef H5
					location.replace('/index/index/wechat_login.html?return_url='+'/course/')
				// #endif
			}
		},
		methods: {
			// 获取token
			getToken(){
				this.$H.post('api/official/loginByOpenId', {'open_id':this.openid}).then(res => {
					uni.setStorageSync('token',res.userinfo.token)
				})
			},
			//获取cookie
			getCookie(name) {
				//web中cookie是以分号+空格隔开的
				var res = document.cookie.split('; ');
				for (let i = 0; i < res.length; i++)
					if (res[i].split('=')[0] === name) return res[i].split('=')[1];
					//未找到
				return '';
			},
			// 教师更多展示
			showMore(e) {
				let index = e.currentTarget.dataset.index;
				// console.log('indexindexindexindex',index)
				let list = [...this.list];
				list[index].moreShow = !list[index].moreShow;
				this.list = list;
			},
			/**
			 * 获取banner
			 */
			getBanner() {
				let that = this;
				this.$H.get('api/banner/getList', {page: 1,position: 'course'}).then(res => {
					this.banner = res.data
				})
			},
			/**
			 * 打开页面
			 */
			openPage: function(e) {
				let that = this;
				let _url = e.currentTarget.dataset.url;
				let _id = e.currentTarget.dataset.id;
				
				// #ifdef H5
					if(!this.openid){
						location.replace('/index/index/wechat_login.html?return_url='+'/course/')
					}
				// #endif
				
				// 打开视频详情
				uni.navigateTo({
					url: _url + '?id=' + _id,
				})
			},
			bannerBtn(e) {
				var that = this;
				var type = e.currentTarget.dataset.type || '';
				let _url = e.currentTarget.dataset.url || '';
				let h5url = e.currentTarget.dataset.hurl || '';
				let action = e.currentTarget.dataset.action || '';
				let param = e.currentTarget.dataset.param || '';
				if (action == 'click') {
				} else if (!h5url) {
					if (_url) {
						uni.navigateTo({
							url: _url
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/web/web?webUrl=' + h5url
					})
				}
			},
			// 获取列表
			getList() {
				if(this.pageParam.hasMore==false) {
					return false;
				}
				if(this.pageParam.page == 1){
					uni.showLoading({
						title:"正在加载"
					})
				}
				this.status = "loading";
				let params = {
					page:this.pageParam.page,
					limit_num:this.pageParam.limit,
				};
				this.$H.get('api/subject/getList', params).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if(this.pageParam.page == 1){
						this.list = [];
					}
					let newTimeList = [];
					for (let i = 0; i < res.length; i++) {
						res[i].moreShow = false;
						res[i].tags = res[i].tag.split(',');
						let obj = {
							limit_time: res[i].limit_time,
							end_time: null,
						}
						if (res[i].limit_time == 1) {
							obj.end_time = res[i].end_time
						}
						newTimeList[i] = obj;
					}
					this.list = this.list.concat(res);
					// 判断是否显示数据为空
					if(this.list.length > 0){
						this.emptyShow = false;
					}else{
						this.emptyShow = true;
					}
					this.timeList = newTimeList;
					this.severalCountDown();
					// if(this.pageParam.page*res.per_page > res.total) {
					// 	this.pageParam.hasMore = false;
					// 	this.status = "nomore"
					// }
				},rej => {
					this.emptyShow = true;
					uni.stopPullDownRefresh();
				})
			},
			//时间显示小于10的前面补0方法
			timeFormat(param) {
				return param < 10 ? '0' + param : param;
			},
			//多个倒计时函数
			severalCountDown: function() {
				let that = this;
				let time = 0;
				let obj = '';
				let timeList = that.timeList;
				//遍历数组，计算每个item的倒计时秒数
				for (var i = 0; i < timeList.length; i++) {
					if(timeList[i].limit_time == 1){
						let endTime = timeList[i].end_time*1000; //结束时间时间戳
						let currentTime = new Date().getTime(); //当前时间时间戳
						time = (endTime - currentTime) / 1000;
						// 如果活动未结束
						if (time > 0) {
							let isday =  parseInt(time / (60 * 60 * 24));
							let day =  Math.ceil(time / (60 * 60 * 24));
							let hou = parseInt(time / (60 * 60));
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							if(isday > 0){
								obj = '距停售' + day + '天';
							}else{
								obj = '距停售' + that.timeFormat(hou) + ':' + that.timeFormat(min) + ':' + that.timeFormat(sec);
							}
						} else { //活动已结束
							obj = '已停售'
							clearTimeout(that.data.timeIntervalSeveral); //清除定时器
						}
						timeList[i].timeTxt = obj;
					}
				}
				let timeIntervalSeveral = setTimeout(that.severalCountDown, 1000);
				this.timeIntervalSeveral = timeIntervalSeveral;
				this.timeList = timeList;
			},
			// 重置
			reseatSearch(){
				this.pageParam.page = 1;
				this.pageParam.hasMore = true;
				this.getList();
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.pageParam.page = 1;
				this.pageParam.hasMore = true;
				this.getList();
				setTimeout(()=>{
					uni.stopPullDownRefresh();
				},5000)
			},
			// // 触底加载
			// onReachBottom() {
			// 	this.pageParam.page += 1;
			// 	this.getList();
			// },
		},
	}
</script>
<style lang="scss">
	page {
		background-color: #F4F4F4;
	}
	.course-list .input-placeholder{
		font-size: 30rpx !important;
		font-family: PingFang SC-Regular, PingFang SC;
		color: #999999;
	}
</style>
<style lang="scss" scoped>
	.course{
		padding-bottom: 30rpx;
	}
	.course.iphoneX-height{
		padding-bottom: 210rpx;
	}
	// .course-con{
	// 	padding-bottom: 28rpx;
	// }
	.course-lis{
		margin: 18rpx auto 0;
		padding: 40rpx 40rpx 30rpx;
		position: relative;
		width: 694rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.09);
		border-radius: 20rpx;
	}
	.course-lis .hot,.course-lis .new{
		position: absolute;
		width: 110rpx;
		height: 116rpx;
		z-index: 4;
		right: 0;
		top: 0;
	}
	.course-lis .new image,.course-lis .hot image{
		display: block;
		width: 100%;
		height: 100%;
	}
	.course-lis-tit{
		font-size: 36rpx;
		font-family: PingFangSC;
		/* font-weight: 600; */
		color: #252122;
		width: 600rpx;
	}
	.course-lis-tit text{
		vertical-align: middle;
	}
	.course-lis-tit .tag{
		display: inline-flex;
		height: 42rpx;
		padding: 0 20rpx;
		align-items: center;
		justify-content: center;
		background: rgba(33,141,253,0.07);
		border-radius: 28rpx;
		font-size: 24rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #218DFD;
		margin-right: 18rpx;
		vertical-align: middle;
	}
	.course-lis-dec{
		font-size: 28rpx;
		font-family: PingFangSC;
		/* font-weight: 600; */
		color: #443C3E;
		margin: 20rpx 0;
	  /* min-height: 70rpx; */
	  max-height: 76rpx;
	}
	.course-lis-bot{
		align-items: flex-end;
	}
	.course-lis-bot .left{
		font-size: 20rpx;
		font-family: PingFangSC;
		color: #FF0000;
		width: 410rpx;
		display: inline-block;
	}
	.course-lis-bot.active .left{
		width: 100%;
		box-sizing: border-box;
		display: inline-block;
	}
	.course-lis-bot .left text{
		margin-right: 12rpx;
	}
	.course-lis-bot .right{
		text-align: right;
	}
	.course-lis-bot .left .test{
		font-size: 20rpx;
		font-family: PingFangSC;
		/* font-weight: 600; */
		color: #9D9D9D;
	}
	.course-lis-bot .old-price{
		font-size: 20rpx;
		font-family: PingFangSC;
		text-decoration: line-through;
		color: #878787;
	}
	.course-lis-bot .now-price{
		font-size: 28rpx;
		font-family: PingFangSC;
		color: #F6263E;
	}
	.course-lis-bot .buy-num{
		font-size: 20rpx;
		font-family: PingFangSC;
		color: #888888;
	}
	.ad image{
		display: block;
		width: 694rpx;
		margin: 0 auto 20rpx;
	}
	.course-teacher{
		position: relative;
	}
	.course-teacher-img{
		flex-wrap: wrap;
		overflow: hidden;
		height: 58rpx;
	}
	.course-teacher-imgmore{
		height: auto;
	}
	.course-teacher .tag-more{
		position: absolute;
		width: 70rpx;
		height: 48rpx;
		background: url('') no-repeat center;
		background-size: 34rpx;
		right: -40rpx;
		bottom: 10rpx;
		z-index: 88;
	}
	.course-teacher .tag-more2{
		background: url('') no-repeat center;
		background-size: 34rpx;
	}
	.course-teacher image{
		display: block;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		margin: 0 6rpx 10rpx 0;
	}
</style>
